<template>
    <el-card :body-style="{padding:'10px'}" v-bind="$attrs">
        <div class="menu-header">
            <span>{{title}}</span>
            <span style="flex:1;"></span>
            
            <el-icon @click="clickEdit" v-if="!isDragging" class="btn-cfg"><edit/></el-icon>
            <el-icon @click="clickSave" v-if="isDragging" class="btn-cfg"><check/></el-icon>
            <el-icon @click="clickList" class="btn-cfg"><List/></el-icon>
        </div>
        <div class="grid-box">
            <template v-for="element in menus" :key="element">
                <div class="box-item" @click="clickItem(element)">
                    <my-img :autoPreview="false" class="func_icon" :src="element[iconKey]" />
                    <span>{{element[labelKey]}}</span>
                    <span v-if="isDragging" v-on:click="removeItem(element)" class="remove-btn">
                        <el-icon :size="24"><Close /></el-icon>
                    </span>
                </div>
            </template>
        </div>
    </el-card>
    <my-dialog ref="dlg" v-model="dlgVisible" width="600px" title="选择显示项目">
        <my-box-grid v-model="allItems2" :cell="cell" @click="onSelectItem" />
        <template #footer>
            <el-button type="default" @click="dlgVisible=false">取消</el-button>
            <el-button type="primary" @click="clcikDlgOK">确定</el-button>
        </template>
    </my-dialog>
</template>


<script>

import store from '../store';

export default {
    name:"MenuBox",
    emits:["update:modelValue","itemClick","update:allItems"],
    props:{
        title:{
            type:String,
            default:""
        },
        allItems:Array,
        modelValue:String,
        itemKey:{
            type:String,
            default:"ID"
        },
        labelKey:{
            type:String,
            default:"label",
        },
        iconKey:{
            type:String,
            default:"icon",
        }
    },
    data() {
        return {
            dlgVisible:false,
            isDragging: false,
            cell:{
                title: this.labelKey,
                icon: this.iconKey,
                select: "select"
            },
            menus: [],
        };
    },
    created() {
        this.makeMenu();
    },
    mounted() {},
    methods: {
        clickItem(item) {
            if(this.isDragging)return;
            this.$emit("itemClick", item);
        },
        makeMenu(){
            const keys = (this.modelValue || "").split(";").filter(p=>p.trim().length>0);
            let items = [];
            let all = this.allItems || [];
            keys.forEach(key=> {
                const item = all.filter(p=>p[this.itemKey]==key)[0];
                if(item){
                    item[this.iconKey] = store.getUrl(item[this.iconKey])
                    items.push(item);
                    item.select = true;
                }
            });
            this.menus = items;
        },
        removeItem(item){
            const ix = this.menus.indexOf(item);
            this.menus.splice(ix,1);

        },
        clickEdit(){
            this.isDragging = true;
        },
        clickSave(){
            this.isDragging = false;
            const value = this.menus.map(p=>p[this.itemKey]).join(";");
            this.$emit("update:modelValue", value);
        },
        clickList(){
            this.dlgVisible = true;
        },
        onSelectItem(item){
            item.select = !item.select;
        },
        clcikDlgOK(){
            const all = this.allItems || [];
            all.forEach(p=>{
                const ix = this.menus.indexOf(p);
                if(p.select){
                    if(ix==-1){
                        this.menus.push(p)
                    }
                }else{
                    if(ix!=-1){
                        this.menus.splice(ix,1);
                    }
                }
            });
            this.dlgVisible = false;
            this.clickSave();
        }
    },
    computed:{
        allItems2:{
            get(){
                return this.allItems;
            },
            set(val){
                this.$emit("update:allItems", val);
            }
        }
    },
    watch:{
        allItems(){
            this.makeMenu();
        },
        modelValue(newValue){
            this.makeMenu();
        }
    }
}

</script>



<style scoped>
img.func_icon {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.grid-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}


.grid-box .box-item {
    text-align: center;
    position: relative;
    display: inline-block;
    height: 86px;
    width: 80px;
    padding: 8px;
    margin: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #3e80b7;
    border: 1px solid #ddd;
    border-radius: 5%;
}

.grid-box .box-item > .item-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.remove-btn {
    display:block;
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    font-size: 16px;
    font-weight: bold;
    color: darkgray;
    cursor: pointer;
}

.menu-header{
    width: 100%;
    display: inline-flex;
    border-bottom: 1px solid #cdcdcd;
    padding: 0;
    margin-bottom: 10px;
}
.btn-cfg{
    font-size: 24px;
    color:gray;
    cursor: pointer;
    padding-left: 6px;
}
.btn-cfg:hover{
    color:#2d62dd;
}
</style>